<template>
  <div class="center" :style="sty">
    <el-card>
      <ul>
        <li v-for="item in content" :key="item">
          {{ item }}
        </li>
      </ul>
    </el-card>
  </div>
</template>
<script setup lang="ts" name="center">
import { ref, watch } from 'vue'
import { propTypes } from '@/utils/propTypes'

const props = defineProps({
  x: propTypes.number.def(0),
  y: propTypes.number.def(0)
})
// const sty = ref({
//   top: props.x + 20 + 'px',
//   left: props.y + 30 + 'px'
// })
const sty = ref({
  top: '',
  left: ''
})
watch(
  () => props.x,
  (val) => {
    sty.value.left = val - 240 + 'px'
  }
)
watch(
  () => props.y,
  (val) => {
    sty.value.top = val - 70 + 'px'
  }
)
const content = ref(['添加下级', '详情', '删除'])
</script>
<style scoped lang="less">
.center {
  position: absolute;
  width: 100px;
  z-index: 9999999;
  /deep/ .el-card__body {
    padding: 5px 0;
    li {
      display: flex;
      align-items: center;
      white-space: nowrap;
      list-style: none;
      line-height: 22px;
      padding: 5px 16px;
      margin: 0;
      font-size: var(--el-font-size-base);
      color: var(--el-text-color-regular);
      cursor: pointer;
      outline: 0;
    }
    li:hover {
      color: #409eff;
      background-color: #e6f7ff;
    }
  }
}
</style>
